<template>
  <div class="box">
    <div class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>场馆维护</el-breadcrumb-item>
        <el-breadcrumb-item><a href="#">场地挂起</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="select">
      <div class="select_left">
        <div class="select_left_info">
          <el-form-item label="场馆">
            <el-select v-model="select.name" placeholder="请选择场馆">
              <el-option
                :label="item.name"
                :value="item.name"
                v-for="item in cglist"
                :key="item.id"
                @click="getSport(item)"
              />
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="block">
        <span class="demonstration">开始时间</span>
        <el-date-picker
          v-model="select.time"
          type="date"
          placeholder="请选择时间"
        />
      </div>
    </div>
    <div class="content">
      <div class="top">
        <div class="top_left">
          <div class="tag">场馆</div>
          <span>{{ select.name }}</span>
        </div>
        <div class="top_right">
          <button @click="batch()">批量挂起</button>
          <button @click="order()">挂起报表</button>
        </div>
      </div>
      <div class="content_title">
        <div class="title_left" v-for="item in sport" :key="item.id">
          <span
            v-for="(i, index) in item.sports"
            :key="i.id"
            @click="getSission(i.id, index)"
            :class="activeNum == index ? 'active' : ''"
          >
            {{ i.sport_type_codeName }}
          </span>
        </div>
        <div class="title_right">
          <div class="title_right_kuang">
            <div class="kuang"></div>
            <span>可挂起</span>
          </div>
          <div class="title_right_kuang">
            <div class="kuang">✔</div>
            <span>已选定</span>
          </div>
          <div class="title_right_kuang">
            <div class="kuang"></div>
            <span>已挂起</span>
          </div>
          <div class="title_right_kuang">
            <div class="kuang"></div>
            <span>订单</span>
          </div>
        </div>
      </div>
      <div class="content_table">
        <div class="content_table_info">
          <div class="resource-titles">
            <div class="resource-titles_info">
              <div class="resource-title_pk">场地/时间</div>
              <div class="resource-items_pk">
                <span
                  class="resource-time"
                  v-for="item in sessions1"
                  :key="item"
                >
                  {{ item.ends }}
                </span>
                <span
                  class="resource-time"
                  v-for="items in sessions2"
                  :key="items"
                >
                  {{ items.starts }}
                </span>
                <span class="resource-time">21:00</span>
              </div>
            </div>
            <div class="resource-title_box">
              <div>
                <div
                  class="resource-title"
                  v-for="item in session"
                  :key="item.id"
                >
                  {{ item.name }}
                </div>
              </div>
              <div>
                <div
                  class="resource-items"
                  v-for="(i, j) in session.length"
                  :key="i"
                >
                  <span
                    class="resource-item"
                    v-for="(item, k) in sessions1.length + sessions2.length + 2"
                    :key="item"
                  >
                    <div
                      :class="
                        GuaList.some((item) => item.j == j && item.k == k)
                          ? 'active'
                          : 'item-state'
                      "
                      @click="Gua({ j, k })"
                    >
                      ✔
                    </div>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="guaQi">
        <div class="guaQi_title">
          {{ select.name }}
        </div>
        <div class="guaQi_content">
          <div class="guaQi_list_left">
            <div class="guaQi_list" v-for="item in wantGua" :key="item">
              <div class="name">{{ item.fildName }}</div>
              <div class="detail">
                <span>{{ formDay(item.date) }}</span>
                &ensp;
                <span>{{ item.startTime }}</span>
                -
                <span>{{ item.endTime }}</span>
                <span @click="delGua(item)">x</span>
              </div>
            </div>
          </div>
          <div class="guaQi_list_right">
            <div class="season">
              <span>
                <el-form :inline="true" :model="Reason" class="searchForm">
                  <el-form-item label="挂起原因">
                    <el-select
                      v-model="Reason.reason"
                      placeholder="请选择挂起原因"
                      class="selsect_season"
                    >
                      <el-option label="维修" value="维修" />
                      <el-option label="停止营业" value="停止营业" />
                      <el-option label="打扫" value="打扫" />
                    </el-select>
                  </el-form-item>
                </el-form>
              </span>
            </div>
            <div class="seasones">
              <span>挂起原因补充：</span>
              <textarea v-model="Reason.note"></textarea>
            </div>
            <div class="seassons_btn">
              <button @click="subSession">确认挂起</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="showAdd" title="批量挂起" width="30%">
      <div class="select_add">
        <span>开始日期</span>
        <el-date-picker
          v-model="hang.start_day"
          type="date"
          placeholder="请选择开始日期"
        />
      </div>
      <div class="select_add">
        <span>结束日期</span>
        <el-date-picker
          v-model="hang.end_day"
          type="date"
          placeholder="请选择结束日期"
        />
      </div>
      <div class="select_add">
        <span>开始时间</span>
        <el-select
          v-model="hang.start_time"
          placeholder="开始时间"
          class="selsect_season"
        >
          <el-option
            :label="item.ends"
            :value="item.ends"
            v-for="item in sessions1"
            :key="item"
          />
          <el-option
            :label="item.ends"
            :value="item.ends"
            v-for="item in sessions2"
            :key="item"
          />
        </el-select>
      </div>
      <div class="select_add">
        <span>结束时间</span>
        <el-select
          v-model="hang.end_time"
          placeholder="结束时间"
          class="selsect_season"
        >
          <el-option
            :label="item.ends"
            :value="item.ends"
            v-for="item in sessions1"
            :key="item"
          />
          <el-option
            :label="item.ends"
            :value="item.ends"
            v-for="item in sessions2"
            :key="item"
          />
        </el-select>
      </div>
      <el-form :model="hang" class="addForm">
        <el-form-item label="共享类型">
          <el-input v-model="hang.reason" placeholder="挂起原因" class="put" />
        </el-form-item>
      </el-form>
      <div class="select_add">
        <span>场地</span>
        <el-checkbox-group v-model="checkList">
          <el-checkbox :label="item.name" v-for="item in session" :key="item" />
        </el-checkbox-group>
      </div>
      <el-button type="primary" @click="subHang()">保存</el-button>
    </el-dialog>
    <el-dialog v-model="showAdd1" title="查看已生成订单" width="50%">
      <div class="order_content">
        <div class="order_content_title">
          <span>挂起场馆</span>
          <span>项目</span>
          <span>场地</span>
          <span>挂起日期</span>
          <span>挂起时间</span>
          <span>挂起原因</span>
          <span>操作</span>
        </div>
        <div
          class="order_content_titles"
          v-for="item in hangList"
          :key="item.id"
        >
          <span>{{ item.sport_name }}</span>
          <span>项目</span>
          <span>{{ item.fields_name }}</span>
          <span>{{ formDay(item.create_time) }}</span>
          <span>{{ item.start_priod }}-{{ item.end_priod }}</span>
          <span>{{ item.reason }}</span>
          <span><button @click="delGua(item)">解除挂起</button></span>
        </div>
        <el-pagination
          @current-change="currentChange"
          background
          layout="prev, pager, next"
          :total="searchForm.total"
          v-model="searchForm.size"
          class="fenye"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
  // 处理时间
  import dayjs from 'dayjs';
  import { ref } from 'vue';
  import {
    Getcg,
    Getcg1,
    Getsession,
    holdList,
    holdBatch,
    Delgua,
    holdBatchBysession,
  } from '@/api/auth.js';
  import { ElMessage } from 'element-plus';
  //添加挂起场地
  const checkList = ref([]);
  //下拉菜单
  const select = ref({
    name: '西可体育丨黄兴公园西可野战',
    time: '2023-06-26',
  });
  const cglist = ref([]);
  const sport = ref([]);
  //点击切换
  const activeNum = ref(0);
  //新增弹出框
  const showAdd = ref(false);
  const showAdd1 = ref(false);
  //挂起菜单
  // const season = ref();
  //挂起时间
  const session = ref([]);
  //运动类型
  const Sport = ref([]);
  const openTime = ref([]);
  const day = ref(0);
  // 分割时间
  const splitTime = ref(60);
  //时间 分段
  const sessions1 = ref([]);
  const sessions2 = ref([]);
  //挂起列表
  const hangList = ref([]);
  //批量挂起
  const batch = () => {
    showAdd.value = true;
  };
  //批量挂起
  const field_id = ref([1, 2]);
  const hang = ref({
    field_ids: field_id.value,
    reason: '',
    note: '',
    start_day: '',
    end_day: '',
    start_time: '',
    end_time: '',
  });
  //session挂起
  const Reason = ref({
    reason: '',
    note: '',
  });
  const Guassion = ref({
    sessions: [
      {
        session_id: 1,
        field_id: '',
        priod_date: select.value.time,
        price: 20,
        start_priod: '',
        end_priod: '',
        discount_price: 2,
        resource_status: 0,
        sport_id: 0,
        is_del: 0,
        reason: '维修',
        note: '今天下午完成',
      },
    ],
  });
  //预挂起
  const wantGua = ref([]);
  //时间格式化
  function formDay(str) {
    return dayjs(str).format('YYYY-MM-DD');
  }
  //已挂起打对钩
  const GuaList = ref([]);
  const Gua = (obj) => {
    let a = GuaList.value.some((item) => item.j == obj.j && item.k == obj.k);
    setTimeout(() => {
      if (a) {
        let index = GuaList.value.findIndex(
          (item) => item.j == obj.j && item.k == obj.k
        );
        GuaList.value.splice(index, 1);
      } else {
        GuaList.value.push(obj);
      }
    }, 50);
    //    wantGua.value.startTime=sessions1.value[obj.k].starts
    //    wantGua.value.endTime=sessions1.value[obj.k].ends
    //    wantGua.value.fildName=session.value[obj.j].id
    const objs = {
      date: select.value.time,
      startTime: sessions1.value[obj.k].starts,
      endTime: sessions1.value[obj.k].ends,
      fildName: session.value[obj.j].name,
    };
    if (GuaList.value.some((item) => item.j == obj.j && item.k == obj.k)) {
      let index = wantGua.value.indexOf(objs);
      wantGua.value.splice(index, 1);
    } else {
      wantGua.value.push(objs);
    }
  };
  //获取运动类型
  const getSport = (item) => {
    Getcg1({ id: item.id }).then((res) => {
      if (res.data.code == 0) {
        sport.value = res.data.data;
      }
    });
  };
  //获取场馆
  const getStadium = () => {
    Getcg({ order: 'asc' }).then((res) => {
      if (res.data.code == 0) {
        cglist.value = res.data.data;
        Sport.value = res.data.data[0].sports[0];
        getSport({ id: res.data.data[3].sports[0].id });
        // getHang({id:res.data.data[3].sports[0].id})
        getSission(res.data.data[3].sports[0].id, 0);
        // console.log(cglist.value);
      }
    });
  };
  getStadium();
  //获取场地时间
  const getSission = (id, index) => {
    activeNum.value = index;
    day.value = index + 1;
    openTime.value = Sport.value['day' + day.value].split(',');
    // openTime.value = sport.value[0].sports
    // console.log(openTime.value);
    var arr = genTimeSession(
      openTime.value[0].split('-')[0],
      openTime.value[0].split('-')[1],
      splitTime.value
    );
    var arr1 = genTimeSession(
      openTime.value[1].split('-')[0],
      openTime.value[1].split('-')[1],
      splitTime.value
    );
    sessions1.value = arr.slice(2, 7);
    sessions2.value = arr1;
    // console.log(sessions1.value,sessions2.value);
    const obj = {
      date: select.value.time,
      sport_id: id,
    };
    Getsession(obj).then((res) => {
      if (res.data.code == 0) {
        session.value = res.data.data;
        console.log(session.value);
      }
    });
  };
  // 写一个方法创建时间分段
  function genTimeSession(start = '08:00', end = '21:00', splitTime = 60) {
    // 返回的数据
    var arr = [];
    // 开始时间
    var startTime = dayjs('2023-06-20 ' + start);
    // 结束时间
    var endTime = dayjs('2023-06-20 ' + end);
    // 遍历100次
    for (var i = 0; i < 100; i++) {
      // 对象{starts:"08:00",ends:"09:00"}
      var obj = { starts: startTime.format('HH:mm') };
      // 结束时间等于在原有基础上加60分钟
      startTime = startTime.add(splitTime, 'minute');
      obj.ends = startTime.format('HH:mm');
      if (startTime.isSameOrBefore(endTime)) {
        arr.push(obj);
      } else {
        break;
      }
    }
    return arr;
  }
  //获取挂起列表
  // const getHang=()=>{
  //     // hang.value.field_ids=item.id

  // }
  //确认挂起
  const subHang = () => {
    let obj = {
      field_ids: hang.value.field_ids,
      reason: hang.value.reason,
      note: hang.value.note,
      start_day: formDay(hang.value.start_day),
      end_day: formDay(hang.value.end_day),
      start_time: hang.value.start_time,
      end_time: hang.value.end_time,
    };
    console.log(obj);
    holdBatch(obj).then((res) => {
      if (res.data.code == 0) {
        ElMessage({
          type: 'success',
          message: '挂起成功',
        });
        showAdd.value = false;
        hang.value = {
          field_ids: '',
          reason: '',
          note: '',
          start_day: '',
          end_day: '',
          start_time: '',
          end_time: '',
        };
      }
    });
  };
  //取消挂起
  const delGua = (item) => {
    let obj = {
      id: item.id,
      session_id: item.session_id,
    };
    Delgua(obj).then((res) => {
      if (res.data.code == 0) {
        ElMessage({
          type: 'success',
          message: '取消成功',
        });
      }
      order();
    });
  };
  //通过session挂起
  const subSession = () => {
    ElMessage({
      type: 'success',
      message: '挂起成功',
    });
    holdBatchBysession(Guassion.value).then((res) => {
      console.log(res);
    });
  };
  //挂起报表
  //分页
  const currentChange = (val) => {
    searchForm.value.current = val;
    console.log(val);
    order();
  };
  const searchForm = ref({ stadium_id: 1, order: 'desc' });
  const order = () => {
    showAdd1.value = true;
    holdList(searchForm.value).then((res) => {
      if (res.data.code == 0) {
        hangList.value = res.data.data;
        searchForm.value.total = res.data.pagination.total;
        searchForm.value.size = res.data.pagination.size;
        searchForm.value.current = res.data.pagination.current;
        console.log(searchForm.value);
      }
    });
  };
</script>
<style lang="less" scoped>
  ::-webkit-scrollbar {
    width: 6px;
  }

  .box {
    margin: 0;
    padding: 0;
    // background-color: rgb(245, 245, 245);
    .header {
      width: 96%;
      height: 45px;
      // background-color: rgb(245, 245, 245);
      padding-left: 50px;

      // a {
      //     font-size: 13px;
      // }

      span {
        line-height: 45px;
      }
    }

    .select {
      display: flex;
      width: 96%;
      margin: 0 auto;
      background-color: white;
      height: 60px;
      align-items: center;
      padding-left: 25px;

      .select_left {
        display: flex;
        align-items: center;
        height: 100%;
        .select_left_info {
          height: 35px;
        }
        .searchForm {
          height: 32px;
        }
      }

      .block {
        .demonstration {
          margin-right: 10px;
        }
      }
    }

    .content {
      width: 98%;
      margin: 8px auto;
      background-color: rgb(255, 255, 255);
      height: 450px;
      margin-bottom: 30px;
      .top {
        width: 96%;
        height: 50px;
        display: flex;
        border-bottom: 1px solid rgb(213, 212, 212);
        justify-content: space-between;
        padding: 0 25px;
        align-items: center;

        .top_left {
          display: flex;
          align-items: center;

          span {
            font-size: 14px;
          }

          .tag {
            width: 30px;
            height: 30px;
            background-color: rgb(255, 217, 120);
            border-radius: 50%;
            transform: scale(0.7);
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            color: white;
          }
        }
        .top_right {
          button {
            border: none;
            background-color: rgb(142, 206, 254);
            color: white;
            margin-right: 15px;
            border-radius: 6px;
            font-size: 12px;
            padding: 2px 8px;
          }
        }
      }
      .content_title {
        width: 96%;
        display: flex;
        height: 60px;
        align-items: center;
        justify-content: space-between;
        padding: 0 25px;
        .title_left {
          display: flex;
          width: 500px;
          height: 55px;
          align-items: center;
          justify-content: flex-start;
          span {
            display: block;
            height: 35px;
            line-height: 35px;
            width: 80px;
            text-align: center;
            border-radius: 3px;
            color: rgb(0, 0, 0);
            font-size: 14px;
            user-select: none;
            cursor: pointer;
            margin-left: 15px;
          }
          .active {
            background-color: rgb(255, 218, 119);
            color: white;
          }
        }
        .title_right {
          display: flex;
          align-items: center;
          height: 60px;
          .title_right_kuang {
            width: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;

            span {
              font-size: 12px;
              transform: scale(0.8);
            }

            &:nth-of-type(2) {
              .kuang {
                font-size: 12px;
                line-height: 10px;
                color: red;
              }
            }

            &:nth-of-type(3) {
              .kuang {
                background-color: rgb(255, 218, 119);
              }
            }

            &:nth-of-type(4) {
              .kuang {
                background-color: rgb(221, 221, 221);
              }
            }

            .kuang {
              width: 10px;
              height: 10px;
              border: 1px solid rgb(222, 222, 222);
            }
          }
        }
      }

      .content_table {
        width: 100%;
        height: 300px;
        // background-color: rgb(245, 245, 245);
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        // border-left: 1px solid rgb(210, 210, 210);
        // border-right: 1px solid rgb(210, 210, 210);
        .content_table_info {
          width: 96%;
          height: 90%;
          background-color: rgb(255, 255, 255);
        }
        .resource-titles {
          float: left;
          width: 100%;
          color: #666;
          background: #ffffff;
          padding-left: 3px;
          height: 100%;
          .resource-titles_info {
            display: flex;
            .resource-items_pk {
              height: 40px;
              line-height: 40px;
              text-align: right;
              margin-left: 20px;
              .resource-time {
                display: inline-block;
                width: 80px;
                cursor: pointer;
                user-select: none;
              }
            }
          }
          .resource-title_pk {
            height: 40px;
            line-height: 40px;
            text-align: center;
            width: 84px;
          }
          .resource-title_box {
            height: 80%;
            overflow-y: auto;
            display: flex;
            .resource-items {
              height: 40px;
              margin: 5px 0;

              .resource-item {
                width: 80px;
                margin-right: 2px;
                display: inline-block;
                cursor: pointer;

                .item-state,
                .active {
                  position: relative;
                  width: 100%;
                  height: 40px;
                  line-height: 40px;
                  text-align: center;
                  margin-bottom: 5px;
                  border: 1px solid #ccc;
                  border-radius: 4px;
                  background: #ffffff;
                  color: transparent;
                  user-select: none;

                  font-size: 30px;
                }
                .active {
                  color: red;
                }
              }
            }
          }
          .resource-title {
            height: 40px;
            width: 80px;
            line-height: 40px;
            text-align: center;
            margin: 5px 0;
          }
        }

        .resource-content {
          width: 80%;
          margin-left: 70px;
          padding: 0 10px;
          overflow-x: auto;
          white-space: nowrap;
          color: #666;
          background: #ffffff;

          .resource-items_pk {
            height: 40px;
            line-height: 40px;
            text-align: left;
            margin-left: 20px;
            .resource-time {
              display: inline-block;
              width: 78px;
              cursor: pointer;
              user-select: none;
            }
          }
        }
      }

      .guaQi {
        // background-color: red;
        width: 100%;
        margin: 0 auto;

        .guaQi_title {
          background-color: white;
          height: 60px;
          line-height: 60px;
          display: flex;
          align-items: center;
          padding-left: 20px;
          font-size: 14px;
          border-bottom: 1px dotted rgb(222, 222, 222);
        }

        .guaQi_content {
          width: 100%;
          height: 200px;
          overflow: hidden;
          display: flex;
          padding-bottom: 150px;

          .guaQi_list_left {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            margin: 20px 0 0 20px;
            width: 900px;
            height: 100%;
          }
          .guaQi_list {
            display: flex;
            width: 270px;
            height: 30px;
            margin-top: 13px;
            margin-left: 15px;
            .name {
              width: 60px;
              height: 25px;
              line-height: 24px;
              border: 1px dotted rgb(225, 225, 225);
              font-size: 12px;
              text-align: center;
            }

            .detail {
              height: 25px;
              line-height: 25px;
              font-size: 12px;
              width: 200px;
              text-align: center;
              border: 1px solid rgb(225, 225, 225);
              margin-left: 15px;

              span {
                &:nth-of-type(4) {
                  display: inline-block;
                  width: 16px;
                  height: 16px;
                  background-color: rgb(255, 127, 114);
                  line-height: 14px;
                  text-align: center;
                  margin-left: 15px;
                  color: white;
                  user-select: none;
                  cursor: pointer;
                }
              }
            }
          }
          .guaQi_list_right {
            margin: 35px 0 0 20px;
            font-size: 14px;
            color: rgb(100, 99, 99);
            .season {
              width: 270px;
              height: 35px;
              line-height: 30px;

              .selsect_season {
                margin-left: 30px;
                width: 195px;
              }
            }

            .seasones {
              height: 85px;
              position: relative;

              textarea {
                position: absolute;
                padding-left: 6px;
                top: 0;
                height: 80px;
                resize: none;
                border: none;
                outline: none;
                font-size: 12px;
                border: 1px solid rgb(216, 216, 216);
              }
            }

            .seassons_btn {
              width: 240px;
              display: flex;
              margin-top: 10px;
              justify-content: flex-end;

              button {
                width: 90px;
                padding: 3px 6px;
                border: none;
                color: white;
                border-radius: 6px;
                background-color: rgb(255, 218, 119);
              }
            }
          }
        }
      }
    }
    .select_add {
      margin-top: 15px;
      span {
        margin-right: 15px;
      }
    }
    .addForm {
      margin-top: 15px;
      .put {
        width: 225px;
      }
    }
    .order_content {
      width: 100%;
      .order_content_title {
        width: 100%;
        display: flex;
        justify-content: space-around;
        line-height: 35px;
        height: 35px;
        background-color: rgb(223, 222, 222);
      }
      .order_content_titles {
        width: 100%;
        display: flex;
        justify-content: space-around;
        line-height: 30px;
        height: 30px;
        text-align: center;
        padding: 5px 0;
        border-bottom: 1px solid #cfcfcf;
        span {
          display: inline-block;
          width: 15%;
          button {
            background-color: rgb(130, 221, 221);
            border: none;
            color: white;
            padding: 2px 6px;
            border-radius: 6px;
            font-size: 12px;
          }
        }
      }
    }
    .fenye {
      margin-top: 30px;
    }
  }
</style>
